<template>
    <div id='orderdetail'>
        <P></P>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>订单号：</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                <div>{{detail.orderNo}}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>创建时间：</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                <div>{{detail.createTime}}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>收件人：</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                <div>
                    {{shippingVo.receiverName}}，{{shippingVo.receiverProvince+'，'+shippingVo.receiverCity+'，'+shippingVo.receiverAddress}}
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>订单状态：</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                <div>{{detail.statusDesc}}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>支付方式：</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                <div>{{detail.paymentTypeDesc}}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>订单金额：</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                <div>{{'￥'+detail.payment}}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
                <table>
                    <thead>
                        <tr>
                            <th>商品图片</th>
                            <th>商品信息</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>合计</th>
                        </tr>
                    </thead>
                    <tbody style="background: white;">
                        <tr v-for="(item,key) in detailChildren" :key="key">
                            <td>
                                <img style="width:100px;" :src="detail.imageHost+item.productImage" alt="">
                            </td>
                            <td>{{item.productName}}</td>
                            <td>{{'￥'+item.totalPrice}}</td>
                            <td>{{item.quantity}}</td>
                            <td>￥{{item.totalPrice*item.quantity}}</td>
                        </tr>
                    </tbody>
                </table>
            </el-col>

        </el-row>

    </div>
</template>

<script>
    import {} from 'vuex'
    import P from '../P.vue';
    import {
        Row,
        Col
    } from 'element-ui'
    import {
        orderDetail
    } from '../../../api/index'
    export default {
        components: {
            P,
            'el-row': Row,
            'el-col': Col
        },
        data() {
            return {
                detailChildren: {},
                detail: {},
                shippingVo: {},
            };
        },
        methods: {
            async getlist(orderNo) {
                // console.log(orderNo);
                let res = await orderDetail({
                    orderNo: orderNo
                })
                this.detail = res.data.data
                this.shippingVo = res.data.data.shippingVo
                this.detailChildren = res.data.data.orderItemVoList
                console.log(this.detail);

            }
        },
        mounted() {
            let orderNo = this.$route.query.orderNo
            // console.log(orderNo);
            this.getlist(orderNo)
        },
        computed: {}
    }
</script>
<style lang='scss' scoped>
    #orderdetail {
        .el-row {
            margin: 15px 0;

            table {
                width: 100%;
                // background: #000;
                border: 1px solid black;

                tr>th,
                tr>td {

                    border-left: 1px solid black;
                    border-top: 1px solid black;
                    text-align: center;
                }
            }
        }

        .el-col>div {
            width: 100%;
            padding: 10px;
            background: white;
        }

        .el-col>h4 {
            width: 100px;
            // text-align: end;
            padding: 10px;
        }
    }
</style>